.box-container {
	.header {
		height: 750rpx;
		background-color: #edac2f;
	}
	.main {
		height: calc(100vh - 250rpx);

		.main-child {
			padding: 20rpx;
			background-color: #fff;
			border-top-right-radius: 20rpx;
			border-top-left-radius: 20rpx;
			transform: translateY(-10rpx);
		}
		.product-info {
			margin-bottom: 40rpx;
			padding-top: 20rpx;
			.name {
				font-size: 40rpx;
				font-weight: 600;
			}
			.remark {
				font-size: 28rpx;
				color: #a2a2a4;
				margin-top: 10rpx;
			}
		}
		.materials {
			margin-bottom: 20rpx;
			display: flex;
			flex-wrap: wrap;
			// .group-name {
			// 	padding: 10rpx 0;
			// 	margin-right: 30rpx;
			// 	color: #b6b6b7;
			// }
			
			.group-name {
				margin: 10rpx 0;
				font-size: 24rpx;
			}
			.material-name {
				font-size: 30rpx;
				color: #333;
				border-left: 4rpx solid #f3c45d;
				padding-left: 15rpx;
				margin: 20rpx 0;
			}

			.values {
				display: flex;
				flex-wrap: wrap;
				overflow: hidden;

				.value {
					background-color: #f5f5f7;
					// color: 26rpx;
					padding: 10rpx 30rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					margin-right: 20rpx;
					margin-bottom: 20rpx;
					border-radius: 12rpx;

					&.selected {
						background-color: #e0a32d;
						color: #fff;
					}
					&.soldOut {
						background-color: #ccc;
						color: #fff;
					}
				}
			}
		}

		.recommend-box {
			.active {
				border: 2rpx solid #f0b848;
			}
			.recommend-content {
				margin-top: 20rpx;
				margin-bottom: 20rpx;
				.recommend-parent {
					display: flex;
					flex-wrap: wrap;
					.product {
						width: 200rpx;
						height: 280rpx;
						border-radius: 6rpx;
						margin-right: 30rpx;
						margin-top: 20rpx;
						image {
							width: 196rpx;
							height: 196rpx;
							border-radius: 6rpx;
						}
						.text {
							height: 71rpx;
						}
						.action {
							height: 71rpx;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
				}
			}
		}

		.product-image {
			padding: 20rpx;
			background-color: #fff;
			border-radius: 10rpx;
			.content {
				margin-top: 20rpx;
			}
		}
	}
	.footer {
		height: 250rpx;
		padding: 20rpx;
		background-color: #fff;
		border-top: 1rpx solid #d4d4d4;
		border-radius: 20rpx 20rpx 0 0;
		.modify-num {
			display: flex;
			justify-content: space-between;
		}
		.btn-box {
			margin-top: 10rpx;
			justify-content: space-between;
			display: flex;
			& > view {
				height: 60rpx;
				width: 47%;
			}
		}
	}
	.del {
		text-decoration: line-through;
	}
	.title {
		border-left: 4rpx solid #edac2f;
		padding-left: 20rpx;
	}

	.set-meal {
		.materials-name {
			line-height: 50rpx;
			font-size: 30rpx;
			color: #a2a2a4;
			margin-top: 20rpx;
			padding-left: 20rpx;
			border-left: 4rpx solid #f3cc82;
		}
		.product-item {
			display: flex;
			flex-wrap: wrap;
			margin-left: 20rpx;
			margin-top: 20rpx;
		}
	}
}
